<script>
import {getCodeNumber, login_toekn} from "@/http/api";

export default {
  name: 'Register',
  setup() {
    const onBack = () => history.back();
    return {
      onBack,
    }
  },
  data() {
    return {
      time: false,
      //倒计时到时间
      codeNum: 60,
      //显示到文本
      codeMsg: this.$t('msg.registerStr6'),
      //按钮是否禁用
      disabled: false,
      //用户输入的内容
      userCode: '',
      //手机号
      phone: '',
      //得到的验证码
      sn: "",
      password: '',
      code: '1234',
      channel: "website",
      // 校验表单数据
      formData: {
        newPassword1: '',
        newPassword2: '',
      },
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate().then(form => {
        console.log("验证成功了", form);
        // 调用接口
        console.log(this.getCode, "---------")
        login_toekn({
          phone: this.phone,
          code: this.code,
          sn: this.sn,
          passWord: this.formData.newPassword1,
          channel: "website"
        }).then(res => {
          console.log(res, "注册成功数据")
        })

      }).catch(err => {
        console.log('表单错误信息：', err);
      });
    },
    sendCode() {
      getCodeNumber({
        phone: this.phone,
      }).then(res => {
        this.sn = res.data.sn;
      })
      this.codeMsg = '獲取驗證碼（' + this.codeNum + '）';
      this.disabled = true;
      let timer = setInterval(() => {
        --this.codeNum;
        this.codeMsg = '重新发送（' + this.codeNum + '）';
      }, 1000);
      setTimeout(() => {
        clearInterval(timer);
        this.codeNum = 60;
        this.disabled = false;
        this.codeMsg = '重新发送';
      }, 60000)
    }
  }
}
</script>

<template>
  <div class="">
    <van-nav-bar
        title=""
        :border=false
        class="nav-bar"
    >
      <template #left>
        <van-icon :name="require('./../../assets/ic_back.png')" size="18" @click="onBack"/>
      </template>
    </van-nav-bar>
    <div class="text_1">
      <text class="text_2">{{ $t('msg.registerStr1') }}</text>
    </div>

    <div class="input_1 flex-row">
      <div class="">
        <text class="text_4">+86</text>
        <van-image class="icon_1" :src="require('./../../assets/ic_login_arrow_below.png')"/>
      </div>
      <input class="text_3" :placeholder="$t('msg.registerStr2')" style="width: 98px; height: 20px" v-model="phone"
             maxlength="15" type="tel"/>
    </div>
    <div class="input_2 flex-row justify-between">
      <input name="newPassword1" class="text_3" type="passWord" :placeholder="$t('msg.registerStr3')"
             v-model="formData.newPassword1"/>
    </div>
    <div class="input_2 flex-row justify-between">
      <input name="newPassword2" class="text_3" type="passWord" :placeholder="$t('msg.registerStr4')" v-model="formData.newPassword2"/>
    </div>
    <div class="input_2 flex-row justify-between">
      <input class="text_3" :placeholder="$t('msg.registerStr5')" style="width: 84px; height: 20px"
             v-model="code"/>
      <button class="button_2 center" :disabled="disabled" @click='sendCode()'>
        <text class="text_6"> {{ codeMsg }}</text>
      </button>
    </div>
    <div class="text-wrapper">
      <button class="button_1 center" type="primary" @click="submit()">{{ $t('msg.registerStr7') }}</button>
    </div>
  </div>
</template>

<style scoped>
.text_1 {
  margin-top: 140px;
}

.text_2 {
  font-size: 30px;
  font-weight: 600;
  color: #000000;
  line-height: 42px;
}

.text_3 {
  overflow-wrap: break-word;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-left: 16px;
  border: none;
  outline: none;
  background: transparent;
  color: #000000;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  line-height: 20px;
  ::placeholder{
    color: #A8A8A8;
  }
}

.text_4 {
  width: 26px;
  height: 18px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  line-height: 18px;
}

.text_6 {
  overflow-wrap: break-word;
  color: rgba(171, 146, 99, 1);
  font-size: 13px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
}

.input_1 {
  height: 52px;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 0 20px 0 20px;
  margin: 60px 30px 20px 30px;

}

.input_2 {
  height: 52px;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 0 20px 0 20px;
  margin: 15px 30px 10px 30px;

}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon_1 {
  width: 8px;
  height: 5px;
  margin-left: 4px;
  align-items: center;

}

.button_2 {
  width: 96px;
  height: 32px;
  border-radius: 26px;
  border: 1px solid #AB9263;
  background: #FFFFFF;
  font-size: 13px;
  color: #AB9263;
}

.button_1 {
  margin-top: 20px;
  width: 353px;
  height: 48px;
  background: #AB9263;
  border-radius: 24px;
  border: none;
  font-size: 17px;
  color: #FFFFFF;
}

.text-wrapper {
  text-align: center;
  margin-top: 20px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>
